<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			/*设置当前网页的视距为800px，人眼距离网页的距离
			 透视的效果*/
			html{
				perspective: 800px;
			}
			
			
			body{
				border: 1px solid black;
				background-color: rgb(241,241,241);
			}
			.box1{
				width: 200px;
				height: 200px;
				background-color: #bfa;
				margin: 200px auto;
				transition: 2s;
			
				
			}
			
			body:hover .box1{
				/*
				 通过旋转可以使元素沿着x、y或者z轴旋转指定的角度
				    rotateX（）
				    rotateY（）
				    rotateZ（）
				    **/
				   
				 /*transform:rotateZ(1turn);*/
				 /*transform:rotateY(180deg) translateZ(400px);*/
				 /*transform: translateZ(400px) rotateY(180deg);*/
				transform: rotateY(180deg);
				/*是否显示元素的背面*/
				backface-visibility: hidden;
			}
		</style>
	</head>
	<body>
		<div class="box1"></div>
	</body>
</html>
